<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子函数</title>
</head>
<body>
    <div id="app">
        <h3>生命周期钩子函数</h3>
        <p>age:{{age}}</p>
        <input type="text" v-model="age">
        <!-- v-model管理、绑定输入框，①设置输入框的选中状态，②获取输入框的值 -->
        <!-- VUE的设计模式MVVM，model-view-Viewmodel -->
        <h5>性别</h5>
        <label for="sex">男</label>
        <input type="radio" value="man" name="sex" v-model="v1">
        <label for="sex">女</label>
        <input type="radio" value="woman" name="sex" v-model="v1">
        <label for="sex">保密</label>
        <input type="radio" value="unknow" name="sex" v-model="v1">
        <p>性别为：{{v1}}</p>
        <h5>爱好</h5>
        <label for="">帅哥</label>
        <input type="checkbox" value="boy" name="hobby" v-model="v2">
        <label for="">美女</label>
        <input type="checkbox" value="girl" name="hobby" v-model="v2">
        <label for="">综艺</label>
        <input type="checkbox" value="program" name="hobby" v-model="v2">
        <label for="">脑残甜剧</label>
        <input type="checkbox" value="drama" name="hobby" v-model="v2">
        <p>爱好：{{v2}}</p>
        <h5>家乡</h5>
        <select name="" id="" v-model="v3">
            <option value="sichuan">四川</option>
            <option value="beijing">北京</option>
            <option value="hainan">海南</option>
            <option value="jilin">吉林</option>
            <option value="neimenggu">内蒙古</option>
        </select>
        <p>家乡：{{v3}}</p>
    </div>
    
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                age: 21,
                v1: 'unknow',
                v2: [],
                v3: ''
            },
            beforeCreate(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeCreate--1');
            },
            created(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('created--2');
                this.getData();
            },
            beforeMount(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeMount--3');
            },
            mounted(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('mounted--4');
            },
            beforeUpdate(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeUpdate--5');
            },
            updated(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('updated--6');
            },
            beforeDestroy(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeDestroy--7');
            },
            destroyed(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('destroyed--8');
            },
            methods: {
                getData(){
                    console.log('GET√');
                }
            }
        })
    </script>
</body>
</html>